<template>
  <el-container>
    <el-main>
      <el-form :model="form.model" :rules="form.rules" ref="formRef" label-width="100px">
        <el-form-item label="反馈用户">
          <div class="sa-flex" v-if="form.model.user">
            <sa-user-profile :user="form.model.user" :id="form.model.user_id" />
          </div>
        </el-form-item>
        <el-form-item label="反馈类型">
          {{ form.model.type }}
        </el-form-item>
        <el-form-item label="反馈内容">
          {{ form.model.content }}
        </el-form-item>
        <el-form-item label="截图">
          <div class="sa-flex">
            <div>
              <sa-preview :url="form.model.images" size="30"></sa-preview>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="联系电话">
          {{ form.model.phone }}
        </el-form-item>
        <el-form-item label="是否处理">
          <el-radio-group v-model="form.model.status">
            <el-radio label="1">已处理</el-radio>
            <el-radio label="0">待处理</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="系统备注">
          <el-input v-model="form.model.remark" placeholder="请输入系统备注"></el-input>
        </el-form-item>
      </el-form>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button v-auth="'shop.admin.feedback.edit'" type="primary" @click="confirm"
        >更新</el-button
      >
    </el-footer>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive, ref, unref } from 'vue';
  import { api } from './feedback.service';
  import { cloneDeep } from 'lodash';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });
  // 添加 编辑 form
  let formRef = ref(null);
  const form = reactive({
    model: {
      remark: '',
      status: '0',
      images: [],
    },
    rules: {},
  });
  const loading = ref(false);
  // 获取详情
  async function getDetail(id) {
    loading.value = true;
    const { error, data } = await api.detail(id);
    error === 0 && (form.model = data);
    loading.value = false;
  }
  // 表单关闭时提交
  async function confirm() {
    // 表单验证
    unref(formRef).validate(async (valid) => {
      if (!valid) return;
      let submitForm = cloneDeep(form.model);
      const { error } =
        props.modal.params.type == 'add'
          ? await api.add(submitForm)
          : await api.edit(props.modal.params.id, submitForm);
      if (error == 0) {
        emit('modalCallBack', { event: 'confirm' });
      }
    });
  }
  async function init() {
    if (props.modal.params.id) {
      await getDetail(props.modal.params.id);
    }
  }
  onMounted(() => {
    init();
  });
</script>
